<template>
  <div>
    <div class="fixed">
      <search-module></search-module>
      <program-type-module></program-type-module>
    </div>
    <div class="classfication">
      <classfication-module></classfication-module>
      <movie-wall-module></movie-wall-module>
    </div>
  </div>
</template>

<script>
import SearchModule from "./modules/SearchModule/SearchModule";
import ProgramTypeModule from "./modules/ProgramTypeModule/ProgramTypeModule";
import ClassficationModule from "./modules/ClassficationModule/ClassficationModule";
import MovieWallModule from "./modules/MovieWallModule/MovieWallModule";
export default {
  name: "App",
  components: {
    SearchModule,
    ProgramTypeModule,
    ClassficationModule,
    MovieWallModule
  },
  mounted() {}
};
</script>

<style>
@import url("./assets/flex.css");
@import url("./assets/iconfont/iconfont.css");
* {
  margin: 0;
  padding: 0;
}
html {
  font-size: 50px;
}
.fixed {
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
}
.classfication {
  margin-top: 110px;
}
.gradual-change {
  color: #f55490 !important;
}
.gradual-change:after {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  content: "";
  background-image: linear-gradient(
    to right,
    rgba(245, 84, 144, 0),
    rgba(255, 255, 255, 0.637)
  );
}
.classfication-swiper-wrapper .nut-hor-scroll {
  display: flex;
}
</style>
